<template>
  <!-- 在共享市场  单个手机号续费   -->
  <el-dialog title="号码续费" :visible.sync="dialogVisible" @close="close" append-to-body :close-on-click-modal="false" width="500px">
    <div class="new_form_box" v-loading="loading">
      <el-form ref="form" :model="form" :inline="true" :rules="rules" label-width="90px" class="demo-ruleForm">
        <el-form-item label="卡位管理方" prop="carrierId">
          <div style="width: 200px;">
            <span>{{form.chuzufangName||'' }}</span>
          </div>
        </el-form-item>
        <el-form-item label="游戏运营商" prop="carrierId">
          <div style="width: 200px;">
            <span> {{ setObj?setObj.carrierName:'' }}</span>
          </div>
        </el-form-item>
        <el-form-item label="单价" prop="">
          <div style="width: 200px;">
            {{ setObj?setObj.monthPrice:'' }}元/卡/月
          </div>
        </el-form-item><br />
        <el-form-item label="号码" prop="" >
          <span v-if="orderInfo&&orderInfo.tel" style="display: inline-block;width: 200px;">{{ orderInfo.tel }}</span>
        </el-form-item>
        <br />
        <el-form-item label="到期日期" prop="">
          <span style="display: inline-block;width: 200px;">
            <span v-if="orderInfo&&orderInfo.expireTime">
              {{ orderInfo&&orderInfo.expireTime.substring(0, 10)}}
            </span>
          </span>

        </el-form-item>
        <br />
        <el-form-item label="续费时长" prop="monthNum">
          <el-input @change="jisuan" style="width:100px;" v-model="form.monthNum" placeholder="请输入"></el-input>
          <span style="padding-right: 85px;">月</span>
        </el-form-item>
      </el-form>
    </div>

    <div class="price-box flex alc">
      <template>
        <div class="flex alc">
          使用费：
          <span class="price1"> ¥{{ form.shiyongfei||0 }}</span>
        </div>
        <div class="flex alc" v-if="form.fuwufei&&setObj&&setObj.fuwufeiType==2">
          服务费：
          <span class="price1"> ¥{{ form.fuwufei||0 }}</span>
        </div>
        <div class="flex alc">
          应付金额：
          <span class="red">¥ </span> <span class="price"> {{ form.shifu||0 }}</span>
        </div>
      </template>
    </div>
    <div class="price-box yue flex alc">
      <template>
        <div class="flex alc">
          当前余额：
          <span class="price1"> ¥{{ shopInfo.availableMoney||0 }}</span>
        </div>
      </template>
    </div>
    <div v-if="setObj&&setObj.fuwufeiType==2" class="tip">提示：服务费{{fuwufeidanjia}}元/卡/月</div>
    <div v-if="setObj&&setObj.fuwufeiType==2" class="tip">
      按照该卡位管理方设置，卡位共享服务费将由您承担。
    </div>

    <div slot="footer" class="center">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">
        <span v-if="type=='xufei'">确认续费并支付</span>
        <span v-else>使用并支付</span>
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import phoneApi from "@/api/phoneManage";
import selectBtnVue from "../../../components/select-btn.vue";
export default {
  name: "",
  components: { selectBtnVue },
  data() {
    return {
      title: "使用卡位",
      isAllCheck: [],
      telNumberListInit: [], //初始 可选的号码列表
      telNumberList: [], //可选的号码列表
      checkTelNumberList: [], //选择的号码列表
      telNumberShow: false,
      dialogVisible: false,
      loading: false,
      // totalPhoneNumber: 0,
      form: {
        tel: "",
        chuzufangName: "",
        shiyongfei: "",
        fuwufei: "",
        shifu: "",
      },
      selectTenantInfo: "",
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      rules: {
        num: [
          { required: true, message: "请输入", trigger: "change" },
          { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
        ],
        monthNum: [
          { required: true, message: "请输入", trigger: "change" },
          { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
          { max: 120, message: "不能超过120", trigger: "blur" },
        ],
      },

      setObj: null,
      kexuanNum: 0,
      guanlifang: null,
      type: "add",
      orderInfo: null,
      fuwufeidanjia:1
    };
  },
  created() {},
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    // carrierTypes() {
    //   return this.$store.getters.gameYunyingshangList;
    // },
  },
  methods: {
    // 打开弹窗
    async open(item) {
      console.log("%c Line:144 🍔 item", "color:#b03734", item);
      this.orderInfo = item;
      this.dialogVisible = true;
      this.form.chuzufangName = item.chuzufangName;
      this.form.carrierId = item.carrierType;
      await this.getNumnowShareset(item.telShareOrderId);
      await this.getFuwufeidanjia()
    },
    // 获取订单中有效号码数量和管理方的共享配置
    async getNumnowShareset(id) {
      const res = await phoneApi.getNumAndSetting({ id });
      if (res.data) {
        if (this.getSetObj(res.data.settingsJson)) {
          this.setObj = this.getSetObj(res.data.settingsJson);
        }
      }
    },

    // 查询卡位服务费单价
    async getFuwufeidanjia() {
      const res = await this.getDicts("kaweifuwufei");
      if (res.data && res.data.length) {
        const obj = this.arrayToObject(res.data, "dictLabel");
        if (obj.kaweifuwufei && obj.kaweifuwufei.dictValue) {
          this.fuwufeidanjia = Number(obj.kaweifuwufei.dictValue);
          this.jisuan()
        }
      }
    },

    getSetObj(jsonstr) {
      let result = null;
      if (jsonstr) {
        const obj = JSON.parse(jsonstr);
        if (obj[this.form.carrierId]) {
          result = obj[this.form.carrierId];
        }
      }
      return result;
    },
    // 时长和数量改变
    jisuan() {
      if (this.form.monthNum) {
        const zujin = this.form.monthNum * this.setObj.monthPrice;
        this.form.shiyongfei = zujin;
        this.form.fuwufei = this.form.monthNum * this.fuwufeidanjia;
        if (this.setObj.fuwufeiType == 2) {
          // 用户承担
          this.form.shifu = this.form.shiyongfei + this.form.fuwufei;
        } else {
          this.form.shifu = this.form.shiyongfei;
        }
      }
      // 计算到期时间
      // if (this.form.monthNum && Number(this.form.monthNum)) {
      //   const result = new Date();
      //   result.setMonth(result.getMonth() + Number(this.form.monthNum));
      //   const r = this.parseTime(result, "{y}-{m}-{d}");
      //   this.form.expireTime = r;
      // }
    },
    // // 运营商改变
    // selectYYSType(e) {
    //   this.form.carrierId = e;
    //   // 清空已填写的数据
    //   this.form.num = "";
    //   this.form.zulinfangId = "";
    //   this.checkTelNumberList = [];
    //   // 初始化可选的号码
    //   // this.initTelList();
    // },
    // // 打开选择号码的弹窗
    // openPhoneSelect() {
    //   this.checkTelNumberList = [];
    //   this.isAllCheck = [];
    //   this.telNumberShow = true;
    //   // 回显已经选择的号码
    //   if (this.form.telInfo && this.form.telInfo.length) {
    //     this.form.telInfo.forEach((r) => {
    //       this.checkTelNumberList.push(r.id);
    //     });
    //   }
    // },
    // // 查询可选的手机号码
    // async initTelList() {
    //   this.telNumberList = [];
    //   this.telNumberListInit = [];
    //   const res = await phoneApi.getWeiGongXiang({
    //     carrierId: this.form.carrierId,
    //   });
    //   if (res.data && res.data.unLeaseInfo) {
    //     res.data.unLeaseInfo.forEach((r) => {
    //       this.telNumberList.push({
    //         id: r.split("-")[0],
    //         tel: r.split("-")[1],
    //       });
    //     });
    //   }
    //   this.telNumberListInit = JSON.parse(JSON.stringify(this.telNumberList));
    // },
    // // 查找号码
    // search() {
    //   if (this.queryParams.tel) {
    //     this.telNumberList = this.telNumberListInit.filter((r) =>
    //       r.tel.includes(this.queryParams.tel)
    //     );
    //   } else {
    //     this.telNumberList = JSON.parse(JSON.stringify(this.telNumberListInit));
    //   }
    // },
    // // 全选号码
    // isAllCheckChange(e) {
    //   this.checkTelNumberList = [];
    //   if (this.isAllCheck && this.isAllCheck.length) {
    //     this.telNumberList.forEach((r) => {
    //       this.checkTelNumberList.push(r.id);
    //     });
    //   }
    // },
    // // 选择号码完成
    // saveTelNumber() {
    //   if (this.checkTelNumberList.length == 0) {
    //     return this.$message.error("请选择号码！");
    //   }
    //   const temp = [];
    //   this.checkTelNumberList.forEach((id) => {
    //     this.telNumberListInit.forEach((r) => {
    //       if (r.id == id) {
    //         temp.push(r);
    //       }
    //     });
    //   });
    //   this.form.num = this.checkTelNumberList.length;
    //   this.form.telInfo = JSON.parse(JSON.stringify(temp));
    //   this.close2();
    // },
    // // 获取可用的手机号
    // getList() {},
    // // 分配方式改变
    // fenpeifangshiChange(e) {
    //   this.form.zulinfangId = "";
    //   this.form.monthNum = "";
    //   // this.getList();
    // },
    // // 选号类型改变
    // xuanhaoTypeChange() {
    //   this.form.num = "";
    //   this.form.telInfo = null;
    //   this.checkTelNumberList = [];
    // },
    // // 选择店铺改变
    // selectChange(e) {
    //   this.tenantList.forEach((r) => {
    //     if (r.tenantId == e) {
    //       this.selectTenantInfo = { ...r };
    //     }
    //   });
    // },

    // 重置
    reset() {
      this.$refs.form.resetFields();
    },

    submitForm() {
      // 表单校验
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 二次确认，提示将从余额支付
          this.$confirm(
            `当前共享订单实付${this.form.shifu}元将使用您的余额支付，确认支付吗？`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              const obj = {
                renewalType: 2, //1订单续费 2单个号码续费
                id: this.orderInfo.id,
                monthNum: this.form.monthNum,
                shifu: this.form.shifu,
              };
              phoneApi
                .telShareOrderRenewal(obj)
                .then((res) => {
                  this.loading = false;
                  this.$message.success(res.msg);
                  this.dialogVisible = false;
                  this.$emit("saved");
                  this.$store.dispatch("getShopInfo");
                })
                .catch((err) => {
                  this.loading = false;
                });
            })
            .catch(() => {});
        } else {
        }
      });
    },
    close() {
      this.resetForm("form");
      this.form.shiyongfei = "";
      this.form.fuwufei = "";
      this.form.shifu = "";
      this.dialogVisible = false;
    },

    close2() {
      this.telNumberShow = false;
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-radio input[aria-hidden="true"] {
  display: none !important;
}
.tip {
  color: #999;
  margin-top: 10px;
}
.price-box {
  color: #999;
  padding: 10px;
  border-radius: 8px;
  background-color: #f8f8f8;
  min-height: 50px;
  &.yue {
    height: 36px;
    margin-top: 10px;
  }
  // margin-top: 10px;
  > div {
    margin-right: 15px;
  }
  .price1 {
    color: #666;
    line-height: 26px;
    // font-size: 18px;
  }
  .price {
    font-size: 26px;
    color: red;
  }
}
.red {
  color: red;
}
</style>
